<!--文件类型-->

<template>
  <div class="message-file item-content">
    <i class="el-icon-document"></i>
    <div class="file-info">
      <p class="file-name">
        {{ getFileName(fileName) }}
      </p>
      <div class="file-opr">
        <div v-show="state === 'success'">
          <a class="file-download" :href="fileUrl" target="_blank" :download="fileUrl">下载</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'message-text',
  props: {
    // 文件名称
    fileName: {
      type: String,
      default: '',
    },
    // 文件状态；成功-success; 失败-failed
    state: {
      type: String,
      default: '',
    },
    // 文件路径
    fileUrl: {
      type: String,
      default: '',
    },
  },
  methods: {
    /**
     * 转换文件名，若文件名称超过9个字符，将进行截取处理
     * @param {String} fileName 文件名称
     */
    getFileName(fileName) {
      if (!fileName) return;
      let name = fileName.substring(0, fileName.lastIndexOf('.'));
      let extend = fileName.substring(fileName.lastIndexOf('.') + 1);
      if (name.length > 9) {
        name = name.substring(0, 3) + '...' + name.substring(name.length - 3);
      }
      return name + '.' + extend;
    },
  },
};
</script>

<style lang="scss" scoped>
.message-file {
  width: 220px;
  padding: 10px 8px;
  margin: 3px;
  overflow: hidden;
  background: #fff;
  border-radius: 5px;

  .el-button {
    padding: 0;
    font-size: 12px;
  }

  .file-info {
    float: left;
    padding: 0 8px;

    .file-name {
      width: 160px;
      display: inline-block;
      color: #333333;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      line-height: 1.3;
    }
  }

  .file-opr {
    margin-top: 8px;
  }

  .file-icon {
    float: left;
    color: #663399;
    font-size: 40px;
  }

  .file-download {
    color: #00a8d7;
    cursor: pointer;
    text-decoration: blink;
  }
}
</style>
